<template>
  <view class="childrensearch_container app_container_page">
    <van-search ::value="keyword" @change="handleSearchChange" shape="round" clearable class="search" :placeholder="searchPlaceholder" use-action-slot @search="handleSearch" background="#ffff62">
      <view slot="action" @click="handleSearch" class="searchBtn">搜索</view>
    </van-search>
    <view v-if="list && list.length === 0" class="search_noData"> 暂无数据 </view>
    <view v-else class="search_res_list">
      <view class="search_item" v-for="item of list" :key="item.id" @click="handleItemClick(item)">{{ item.name }}</view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { getKindergartenList, getStudentList } from '@/api/children'
export default {
  name: 'childrensearch',
  // components: {},
  data() {
    return {
      // children,kindergarten
      type: 'children',
      keyword: '',
      //
      list: null
    }
  },
  computed: {
    ...mapState({
      province: (state) => state.moduleChildren.area.province,
      city: (state) => state.moduleChildren.area.city,
      district: (state) => state.moduleChildren.area.district,
      kindergarten: (state) => state.moduleChildren.kindergarten,
      classObj: (state) => state.moduleChildren.classObj
    }),
    searchPlaceholder() {
      return this.type === 'children' ? '请输入孩子姓名' : '请输入幼儿园名称'
    }
  },
  methods: {
    handleSearchChange(event) {
      this.keyword = event.detail
      // console.log(event)
    },
    async handleSearch() {
      //
      // console.log(this.keyword)
      try {
        let res
        if (this.type === 'children') {
          res = await getStudentList({ classId: this.classObj.id, kindergartenId: this.kindergarten.id, name: this.keyword })
        } else if (this.type === 'kindergarten') {
          res = await getKindergartenList({ kindergartenName: this.keyword, province: this.province, city: this.city, district: this.district })
        }
        this.list = res.data.list
      } catch (error) {
        console.log(error)
      }
    },
    handleItemClick(item) {
      // console.log(item, this.type)
      this.$store.commit('moduleChildren/SET_VALUE', {
        key: this.type,
        val: {
          id: item.id,
          name: item.name,
          sex: item.sex || undefined
        }
      })
      if (this.type === 'kindergarten') {
        const typeArr = ['classObj', 'children']
        for (let i = 0; i < typeArr.length; i++) {
          this.$store.commit('moduleChildren/SET_VALUE', {
            key: typeArr[i],
            val: {
              id: null,
              name: '',
              sex: undefined
            }
          })
        }
        // console.log(this[typeArr[i]])
      }
      uni.navigateBack()
    }
  },
  onLoad(option) {
    // 此页面仅用于孩子添加
    this.type = option.type

    this.handleSearch()
  }
}
</script>

<style lang="scss">
.childrensearch_container {
  .searchBtn {
    font-size: 40rpx;
    font-weight: 500;
  }

  .search_noData {
    color: $fc_sub;
    text-align: center;
    padding: 60rpx 0;
  }

  .search_res_list {
    padding-top: 30rpx;
    height: calc(100% - 108rpx);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .search_item {
    padding: 30rpx;
    font-size: 30rpx;
  }

  .van-search__action--hover {
    background-color: darken(#ffff62, 20%);
  }
}
</style>
